<!-- 
传递`params`参数时，若使用`to`的对象写法，必须使用`name`配置项，不能用`path`。

备注2：传递`params`参数时，需要提前在规则中占位。
    安全性考虑：
    由于params不会显示在地址栏中，它更适合传递敏感信息。而query则因为直接显示在地址栏中，不适合传递敏感信息。

    响应式更新：
    params作为路由的一部分，当路由改变时，组件内部可以通过this.$route.params获取到更新后的参数。而query则需要通过this.$route.query来获取更新后的参数。

    适用场景：
    params适用于那些需要与路由路径紧密关联的参数传递，例如在用户详情页中传递用户ID。而query则适用于那些不需要与路由路径紧密关联的场景，例如分页或者搜索条件等。

 -->

<template>
    <div class="news">
    <ul>
        <!-- 导航区 -->
        <li v-for="i in newList" :key="i.id">

            <RouterLink :to="{

                name: 'liebiao',
                params: {
                    id: i.id
                    , title: i.title,
                    content: i.content
                }

            }">
            {{ i.title }}</RouterLink>
        </li>
    </ul>
    <!-- 内容区 -->
    <div class="news-content">
        <RouterView/>
    </div>
    </div>
</template>
<script lang="ts" setup name="News">

import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router';


const newList = ref([
    {
        id: "sdsadasd1",
        title: "大清",
        content: "大清天下无敌"
    }
    , {
        id: "sdsadasd2",
        title: "不列颠",
        content: "不列颠统治世界"
    }
    , {
        id: "sdsadasd3",
        title: "德意志",
        content: "德意志帝国"
    }
])
</script>
<style>
/* 新闻 */
.news {
    /* 内边距上下0,左右20px */
    padding: 0 20px;
    display: flex;
    /* 用于设置容器中子元素的水平对齐方 */
    justify-content: space-between;
    height: 100%;
}

.news ul {
    margin-top: 30px;
    /* 于取消列表项前的标记（如圆点、数字等 */
    list-style: none;
    padding-left: 10px;
}

.news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
}

.news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
}
</style>


